{% extends "base.html" %}
{% load static %}
{% load widget_tweaks %}

{% block title %}{% if form.instance.pk %}编辑 OPC UA 订阅{% else %}添加 OPC UA 订阅{% endif %}{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        {% if form.instance.pk %}
                            <i class="bi bi-pencil-square"></i> 编辑 OPC UA 订阅
                        {% else %}
                            <i class="bi bi-plus-circle"></i> 添加 OPC UA 订阅
                        {% endif %}
                    </h4>
                    {% if form.instance.pk %}
                    <span class="badge {% if form.instance.is_active %}bg-success{% else %}bg-danger{% endif %}">
                        {% if form.instance.is_active %}已启用{% else %}已禁用{% endif %}
                    </span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        {# 基本信息 #}
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">基本信息</h5>
                            </div>
                            <div class="card-body">
                                {# 订阅名称 #}
                                <div class="mb-3">
                                    <label for="{{ form.name.id_for_label }}" class="form-label fw-bold">
                                        {{ form.name.label }} <span class="text-danger">*</span>
                                    </label>
                                    {% render_field form.name class="form-control" placeholder="请输入订阅名称" %}
                                    {% if form.name.help_text %}
                                    <div class="form-text">{{ form.name.help_text }}</div>
                                    {% endif %}
                                    {% if form.name.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.name.errors %}{{ error }}{% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                {# 数据源选择 #}
                                <div class="mb-3">
                                    <label for="{{ form.data_source.id_for_label }}" class="form-label fw-bold">
                                        {{ form.data_source.label }} <span class="text-danger">*</span>
                                    </label>
                                    {% render_field form.data_source class="form-select" %}
                                    {% if form.data_source.help_text %}
                                    <div class="form-text">{{ form.data_source.help_text }}</div>
                                    {% endif %}
                                    {% if form.data_source.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.data_source.errors %}{{ error }}{% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                {# 节点ID #}
                                <div class="mb-4">
                                    <label for="{{ form.node_id.id_for_label }}" class="form-label fw-bold">
                                        {{ form.node_id.label }} <span class="text-danger">*</span>
                                    </label>
                                    {% render_field form.node_id class="form-control" placeholder="例如：ns=2;s=Channel1.Device1.Tag1" %}
                                    {% if form.node_id.help_text %}
                                    <div class="form-text">{{ form.node_id.help_text }}</div>
                                    {% endif %}
                                    {% if form.node_id.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.node_id.errors %}{{ error }}{% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                <hr class="my-4">

                                {# 报警条件设置 #}
                                <h5 class="mb-3">报警条件设置</h5>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label for="{{ form.condition.id_for_label }}" class="form-label">
                                            {{ form.condition.label }} <span class="text-danger">*</span>
                                        </label>
                                        {% render_field form.condition class="form-select" %}
                                        {% if form.condition.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.condition.errors %}{{ error }}{% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-4">
                                        <label for="{{ form.threshold_value.id_for_label }}" class="form-label">
                                            {{ form.threshold_value.label }} <span class="text-danger">*</span>
                                        </label>
                                        {% render_field form.threshold_value class="form-control" type="number" step="any" %}
                                        {% if form.threshold_value.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.threshold_value.errors %}{{ error }}{% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-4" id="threshold_max_container" style="display: none;">
                                        <label for="{{ form.threshold_max.id_for_label }}" class="form-label">
                                            {{ form.threshold_max.label }} <span class="text-danger">*</span>
                                        </label>
                                        {% render_field form.threshold_max class="form-control" type="number" step="any" %}
                                        {% if form.threshold_max.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.threshold_max.errors %}{{ error }}{% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>

                                {# 单位 #}
                                <div class="mb-4 mt-3">
                                    <label for="{{ form.unit.id_for_label }}" class="form-label">
                                        {{ form.unit.label }}
                                    </label>
                                    {% render_field form.unit class="form-control" placeholder="例如：℃、%、MPa" %}
                                    {% if form.unit.help_text %}
                                    <div class="form-text">{{ form.unit.help_text }}</div>
                                    {% endif %}
                                </div>

                                {# 报警消息 #}
                                <div class="mb-4">
                                    <label for="{{ form.alert_message.id_for_label }}" class="form-label fw-bold">
                                        {{ form.alert_message.label }} <span class="text-danger">*</span>
                                    </label>
                                    {% render_field form.alert_message class="form-control" rows="3" %}
                                    {% if form.alert_message.help_text %}
                                    <div class="form-text">{{ form.alert_message.help_text }}</div>
                                    {% endif %}
                                    {% if form.alert_message.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.alert_message.errors %}{{ error }}{% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                {# 启用状态 #}
                                <div class="mb-4">
                                    <div class="form-check form-switch">
                                        {% render_field form.is_active class="form-check-input" %}
                                        <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                            {{ form.is_active.label }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <a href="{% url 'opcua_subscription_list' %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回列表
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> 保存订阅
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 表单验证
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });

    // 根据条件显示/隐藏最大阈值输入框
    const conditionSelect = document.getElementById('id_condition');
    const thresholdMaxContainer = document.getElementById('threshold_max_container');
    
    function toggleThresholdMax() {
        thresholdMaxContainer.style.display = 
            conditionSelect.value === 'range' ? 'block' : 'none';
    }

    if (conditionSelect && thresholdMaxContainer) {
        conditionSelect.addEventListener('change', toggleThresholdMax);
        toggleThresholdMax(); // 初始化时设置显示状态
    }
});
</script>
{% endblock %}
{% endblock %} 